<template>
  <div>
    <s-table ref="table" size="default" :rowKey="record => record.time + record.name" :columns="columns" :data="loadData" :pagination="paginationProps">
      <span slot="time" slot-scope="text, record">
        {{ text }}
        <a-tag color="orange" style="margin-top: 8px">
          {{ record.channel }}
        </a-tag>
      </span>
      <span slot="info" slot-scope="text, record">
        <template>
          <div class="goods">
            <p class="tagType blue" v-if="record.type == 2">退货</p>
            <img :src="record.imgUrl ? record.imgUrl : 'https://img.bzhz.jnbygroup.com/cloth.png'" alt="" @click="showGoodInfo(record)" />
            <div>
              <a-tooltip>
                <template slot="title"> 【{{ record.brand }}】{{ record.goodsName }} </template>
                <h3 class="title">【{{ record.brand }}】{{ record.goodsName }}</h3>
              </a-tooltip>
              <p class="detail">
                <span>{{ record.season }}</span
                ><span>{{ record.bigClass }} / {{ record.smallClass }}</span
                ><span>{{ record.element }}</span
                ><span>{{ record.color }}</span
                ><span>{{ record.size }}</span>
              </p>
            </div>
          </div>
        </template>
      </span>
    </s-table>
    <GoodInfoModal ref="goodInfoModal"></GoodInfoModal>
  </div>
</template>
<script>
import { STable } from '../../../components'
import { getGroupOrder } from '@/api/box/api'
import GoodInfoModal from '../../../components/GoodInfoModal'
const columns = [
  {
    title: '付款时间',
    dataIndex: 'time',
    width: 120,
    scopedSlots: { customRender: 'time' }
  },
  {
    title: '商品',
    dataIndex: 'info',
    scopedSlots: { customRender: 'info' },
    width: 300
  },
  {
    title: '款号',
    dataIndex: 'name',
    width: 120
  },
  {
    title: '年份',
    dataIndex: 'year'
  },
  {
    title: '数量',
    dataIndex: 'productNum',
    align: 'center'
  },
  {
    title: '标准价格（单价）',
    dataIndex: 'productPrice',
    align: 'center'
  },
  {
    title: '标准金额（订单金额）',
    dataIndex: 'productAmtPrice',
    align: 'center'
  },
  {
    title: '成交金额',
    dataIndex: 'productAmtActual',
    align: 'center'
  },
  {
    title: '折扣',
    dataIndex: 'discount',
    align: 'center'
  }
]
export default {
  components: {
    STable,
    GoodInfoModal
  },
  data() {
    this.columns = columns
    return {
      unionId: '',
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      loadData: parameter => this.fetchData(parameter)
    }
  },
  created() {
    this.unionId = this.$route.params.id
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  methods: {
    // 集团消费记录
    fetchData(parameter) {
      let params = {
        page: parameter,
        requestData: {
          unionId: this.unionId
        }
      }
      return getGroupOrder(params).then(res => {
        if (res.code == 0) {
          return res
        } else {
          this.$message.error(res.msg)
          const data = {
            page: {
              pageNo: 0,
              count: 0,
              pageSize: 10
            },
            data: []
          }
          return data
        }
      })
    },
    showGoodInfo(record) {
      this.$refs.goodInfoModal.show(record.productId, record.skuId)
    }
  }
}
</script>
<style lang="less" scoped>
.goods {
  display: flex;
  position: relative;
  img {
    min-width: 80px;
    height: 80px;
    object-fit: scale-down;
    border: 1px dashed #cdcdcd;
    margin-right: 12px;
    cursor: pointer;
    background: #fff;
  }
  div {
    .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 350px;
    }
    .detail {
      color: #666;
      span {
        display: inline-block;
        margin-left: 12px;
      }
    }
  }
}
.tagType {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 2;
  padding: 0 8px;
  &.blue {
    background: #1890ff;
  }
}
</style>
